<script setup>
import { ref, reactive, defineProps, defineEmits, watch } from 'vue';
import { message } from 'ant-design-vue';
import { register } from "@/api/user.js";

// 定义接收父组件参数变量
const props = defineProps({
    // 模态框的标题
    isRegister: Boolean,
    // 模态框打开控制开关
    visible: Boolean,
    userinfo: Object
})

// 定义emits方法，调用父组件关闭模态框方法closeModal
const emits = defineEmits(['closeModal'])

// 模态框内容提交方法
const submit = ()=>{
    // 将模块框内容提交
    // 提交时提交按钮变成loading状态
    // confirmLoading.value = true;

    console.log(props.userinfo)

    // if(props.isRegister){
    //     registeuserInfo()
    // }
}

const confirmLoading = ref(false)

let userInfo = reactive({});

watch(
    ()=> props.isRegister,
    (newval, oldval)=>{
        console.log(newval)
    }
)
watch(
    ()=> props.userdata,
    (newval, oldval)=>{
        console.log(newval)
    }
)

// userInfo = props.userdata

// {
//   userName: "222",
//   name: "111",
//   passWord: "222",
//   apartment: "222",
//   authority: "1",
// }

const onCancel = ()=>{
    // 仅将模态框关闭，修改visible为false
    emits('closeModal')
}

// 注册新用户
const registeuserInfo = ()=>{
    register(userInfo)
        .then((response) => {
            // 提示注册成功
            message.success(response.data.message);
            // loading状态修改为false
            confirmLoading.value = false;
            // 将模态框关闭，修改visible为false
            emits('closeModal')

            // 表格数据重新加载
            // queryuserInfo({ "userInfoName": "" })
            //     .then((response) => {
            //     let res = response.data.data;
            //     res = res.map((value, index) => {
            //         value["order"] = index + 1;
            //     });
            //     userInfoData.value = response.data.data;
            //     })
            //     .catch((error) => {
            //     console.log(error);
            //     });
            })
        .catch((error) => {
            message.error(error.data.message);
            // loading状态修改为false
            confirmLoading.value = false;
            emits('closeModal')
        });
}
// 更新用户信息方法
const modify = ()=>{

}

</script>

<template>
  <a-modal
    v-model:visible="visible"
    :title="props.isRegister ? '用户注册':'用户信息修改'"
    ok-text="提交"
    cancel-text="取消"
    @ok="submit"
    @cancel="onCancel"
    :confirm-loading="confirmLoading"
  >
    <a-form
      ref="formRef"
      name="form_in_modal"
      labelAlign="right"
      :labelCol="{span: 4}"
    >
      <a-form-item label="登录名">
        <a-input placeholder="登录名" allow-clear v-model:value="userInfo.userName" />
      </a-form-item>
      <a-form-item label="姓名">
        <a-input placeholder="姓名" allow-clear v-model:value="userInfo.name" />
      </a-form-item>
      <!-- 当模态框为用户注册时显示密码框，为修改时不显示 -->
      <template v-if="isRegister">
        <a-form-item label="密码" >
            <a-input-password placeholder="密码" allow-clear v-model:value="userInfo.passWord" />
        </a-form-item>
        <a-form-item label="确认密码">
            <a-input-password placeholder="确认密码" allow-clear />
        </a-form-item>
      </template>
      <a-form-item label="部门">
        <a-input placeholder="部门" allow-clear v-model:value="userInfo.apartment" />
      </a-form-item>
      <a-form-item label="权限">
        <a-input placeholder="权限" allow-clear v-model:value="userInfo.authority" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped lang="scss"></style>
